<template>
  <div class="bg-content">
    <div class="title">
      <img src="@/assets/home/cricle.png" alt="" class="title-pl" />
      <span class="s-title">
                <span class="title-name">&nbsp;&nbsp;实时状态</span>
            </span>
      <span class="fl">
  <span
      :class="currentStatus === '2' ? 'f-active' : ''"
      @click="changeStatus('2')">二轮车情况
  </span>&nbsp;|&nbsp;
  <span
      :class="currentStatus === '4' ? 'f-active' : ''"
      @click="changeStatus('4')">四轮车情况
  </span>
</span>
      <span class="right-light">
         <span
             :class="{'active': !isMonth}"
             @click="toggleView(false)">日</span>&nbsp;&nbsp;
                <span
                    :class="{'active': isMonth}"
                    @click="toggleView(true)">月</span>
<!--                <span class="active">日</span>&nbsp;&nbsp;-->
<!--                <span>月</span>-->
<!--                <span>年</span>-->
            </span>
    </div>
    <div class="content" id="echarts1"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
export default {
  props: {
    regionId: {
      type: String,
      default: '100000',
    },
  },
  watch: {
    isMonth(newVal) {
      this.toggleView(this.isMonth);// 更新数据
    },
    regionId(newVal) {
      //console.log("新的区域IDnnnnnnnnnnnnnnnnnn:", newVal);
      // 在这里可以根据新的区域ID重新请求数据或更新图表
      this.getData();
      this.getregionId(newVal);
    },
    currentStatus(newVal) {
      //console.log("新的区域IDnnnnnnnnnnnnnnnnnn:", newVal);
      // 在这里可以根据新的区域ID重新请求数据或更新图表
      this.getData();
      this.getregionId(newVal);
    }
  },

  data() {
    return {
      time_data : [
        "1日", "6日", "12日", "18日", "24日", "30日"// 示例数据
        // 这里可以填充月视图所需的数据
      ],
      nowtime: 5,//默认是,月，约代表的就是5
      isMonth: true, // 控制当前是日视图还是月视图
      summedPvData: [],
      summedNormalData: [],
      currentStatus: '2', // 默认选中“二轮车情况”
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    toggleView(isMonth) {
      this.isMonth = isMonth;
      if (isMonth) {
        this.nowtime = 5;
        // 如果是月视图，更新 time_data
        this.time_data = [
          "1日", "6日", "12日", "18日", "24日", "30日", // 示例数据

          // 这里可以填充月视图所需的数据
        ];
      } else {
        this.nowtime = 4;
        // 如果是日视图，恢复 time_data
        this.time_data = [
          "8:00",
          "10:00",
          "12:00",
          "14:00",
          "16:00",
          "18:00",
        ];
      }
      this.getData(); // 根据当前视图获取数据
    },
    //切换点击
    changeStatus(status) {
      this.currentStatus = status;
      console.log(this.currentStatus)
      // 在这里可以添加额外的逻辑，比如根据当前状态更新图表数据
    },
    getData(){
      const nowtime = this.nowtime;
      const two_four = this.currentStatus;
      const regionId =this.regionId;
      axios.get(`${this.$httpUrl}charge?two_four=${two_four}&date=${nowtime}&id=${regionId}`)
          .then(response => {
            const data = response.data; // 从响应中获取数据
            //console.log("data" ,data)
            this.summedPvData = data.summedPvData;
            this.summedNormalData = data.summedNormalData;

            this.init(); // 在获取数据后初始化图表
          })
          .catch(error => {
            console.error("获取数据失败:", error);
          });
    },
    init() {
      var Aengin = echarts.init(document.getElementById("echarts1"));
      Aengin.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(1,26,74,0.5)",
            },
          },
          backgroundColor: "none",
          borderColor: "none",
          borderWidth: 0,
          padding: 0,
          formatter: function (params) {
            console.log(params);
            var html = "";
            for (var i = 0; i < params.length; i++) {
              html += `<div style="color:#ffffff">${params[i].seriesName}:${params[i].data}°</div>`;
            }
            var res = `<div style="background:rgba(19,55,100,0.5); padding:15px"><div style="color:#5ec8d8;font-weight:bold">${params[0].name}</div>${html}</div>`;
            return res;
          },
        },
        legend: {
          data: ["市电售电量", "光伏售电量"],
          orient: "horizontal", // 图例的排列方式：'horizontal'或'vertical'
          left: "center", // 图例的位置：'center'、'left'、'right'等
          icon:"line",
          bottom: "bottom", // 图例的顶部位置
          textStyle: {
            color: "#c7c7c7", // 图例文字颜色
            fontSize: 14, // 图例文字大小
          },
        },
        grid: {
          left: "1%", // 左边距
          right: "1%", // 右边距
          top: "10%", // 上边距
          bottom: "15%", // 下边距
          containLabel: true, // 包含坐标轴标签
        },
        xAxis: [
          {
            type: "category",
            // data: [
            //   "8:00",
            //   "10:00",
            //   "12:00",
            //   "14:00",
            //   "16:00",
            //   "18:00",
            // ],
            data: this.time_data,
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisTick: {
              show: false, // 不显示 Y 轴的小刻度线
            },
            axisLabel: {
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 4,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#DDD",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#c7c7c7",
              },
            },
            axisLabel: {
              color: "#c7c7c7", // 设置Y轴字体颜色为红色
            },
            axisTick: {
              show: false, // 不显示 Y 轴的小刻度线
            },
            nameTextStyle: {
              show: false,
              color: "#999",
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "市电售电量", // 修改系列名称
            type: "bar",
            barWidth: "15%",
            data: this.summedNormalData,
            // data: [230, 600, 200, 360, 230, 805],
            itemStyle: {
              normal: {
                color: "#006bff",
              },
            },
          },
          {
            name: "光伏售电量", // 修改系列名称
            type: "bar",
            barWidth: "15%",
            barGap: "0%",
            data: this.summedPvData,
            // data: [30, 100, 150, 120, 220, 400],
            itemStyle: {
              normal: {
                color: "#ffbb00",
              },
            },
          },
        ],
      });
    },
  },
};
</script>


<style lang="less" scoped>
.bg-content {
  height: calc((100vh - 0.75rem) / 3 - 0.18rem);
  margin-bottom: 0.05rem;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #44c9c9,#000606) 1;
  padding: 0.05rem;
  .title {
    font-size: 0.18rem;
    color: #ffffff;
    font-weight: bold;
    position: relative;
    height: 0.35rem;
    line-height: 0.35rem;
    text-align: left;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(to right, #3aacac, #000202) 1;
    .title-name {
      font-size: 0.14rem;
    }
    .title-pl {
      position: relative;
      top: 0.05rem;
    }
    .right-light {
      position: absolute;
      right: 0;
      display: inline-block;
      font-size: 0.14rem;
      padding: 0;
      height: 0;
      font-weight: 400;
      cursor: pointer;
      span {
        padding: 2px 5px;
        background-color: #091a1a;
        cursor: pointer;
      }
    }
    .active {
      background-image: url("./../../../assets/home/sun.png");
    }
    .fl {
      font-size: 13px;
      color: gray;
      font-weight: bold;
      margin-left: 0.5rem;
      cursor: pointer;
    }
    .f-active {
      color: #4ee7e7;
    }
  }
  .content {
    height: calc((100vh - 0.75rem) / 3 - 0.13rem - 0.45rem);
  }
}
</style>
